<template>
  <div>
    <!-- elementui
      ui框架，负责页面展示 

      easyui，
      jq
        bootstrap，layui（贤心）-layer，
      vue
        element-ui，element-plus
        vant-ui，uview，mui，
    -->
        <h1>element-ui的使用</h1>
        <i class="el-icon-edit" style="font-size: 30px;color: red;"></i>
        <i class="el-icon-share"></i>
        <i class="el-icon-delete"></i>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <hr>
        按钮
        <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
  <div>
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  <el-link type="primary">主要链接</el-link>
  <el-link type="success">成功链接</el-link>
  <el-link type="warning">警告链接</el-link>
  <el-link type="danger">危险链接</el-link>
  <el-link type="info">信息链接</el-link>
  <el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<el-button-group>
  <el-button type="primary" icon="el-icon-edit"></el-button>
  <el-button type="primary" icon="el-icon-share"></el-button>
  <el-button type="primary" @click="onDel" icon="el-icon-delete"></el-button>
</el-button-group>
</div>
  </div>
</template>

<script>
  export default {
    methods:{
      onDel(){
        console.log("点击了删除按钮！");
      }
    }
  }
</script>

<style scoped>

</style>